<template>
  <div style="height: 100%; width: 100%">
    <!-- 漏洞数据饼图 -->
    <el-card
      shadow="hover"
      class=".jjp"
      style="width: 600px; height: 280px; display: inline-block"
    >
      <div id="loophole"></div>
    </el-card>

    <!-- 服务器数据饼图 -->
    <el-card
      shadow="hover"
      class=".jjp"
      style="
        width: 600px;
        height: 280px;
        display: inline-block;
        margin-left: 40px;
      "
    >
      <div id="service"></div>
    </el-card>
    <!-- 处理漏洞用户表格 -->
    <el-card
      shadow="hover"
      class=".jjp"
      style="
        width: 1000px;
        height: 332px;
        display: inline-block;
        margin-top: 10px;
      "
    >
      <div id="user"></div
    ></el-card>
  </div>
</template>
 
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      // 存放服务器资源
      services: [],
      serviceitem: [
        { value: 0, name: "禁用" },
        { value: 0, name: "启用" },
      ],
      //存放漏洞数据
      loopholes: [],
      loopholeitem: [
        { value: 0, name: "未处理" },
        { value: 0, name: "已处理" },
        { value: 0, name: "处理中" },
      ],
      // 存放用户数据
      users: [],
      useritem: {
        usernamedata: [],
        userhandleddata: [],
        userhandlingdata: [],
        userservicedata: [],
      },
      // 存放echarts对象
      options: [
        {
          title: {
            text: "服务器数据",
            left: "center",
          },
          tooltip: {
            trigger: "item",
          },
          legend: {
            orient: "vertical",
            left: "left",
          },
          series: [
            {
              name: "服务器",
              type: "pie",
              radius: [2, "60%"],
              itemStyle: {
                borderRadius: 5,
              },
              data: [
                { value: 0, name: "禁用" },
                { value: 0, name: "启用" },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        },
        {
          title: {
            text: "漏洞统计",
            left: "center",
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          legend: {
            orient: "vertical",
            left: "left",
          },
          series: [
            {
              name: "所有漏洞",
              type: "pie",
              radius: [2, "60%"],
              itemStyle: {
                borderRadius: 5,
              },
              data: [
                { value: 0, name: "未处理漏洞" },
                { value: 0, name: "已处理漏洞" },
                { value: 0, name: "处理中漏洞" },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)",
                },
              },
            },
          ],
        },
        {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          legend: {
            data: ["处理中漏洞", "已处理漏洞"],
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: {
            type: "value",
          },
          yAxis: {
            type: "category",
            data: ["admin"],
          },
          series: [
            {
              name: "处理中漏洞",
              type: "bar",
              stack: "total",
              label: {
                show: true,
              },
              emphasis: {
                focus: "series",
              },
              data: [50],
            },
            {
              name: "已处理漏洞",
              type: "bar",
              stack: "total",
              label: {
                show: true,
              },
              emphasis: {
                focus: "series",
              },
              data: [50],
            },
          ],
        },
      ],
    };
  },

  mounted() {
    // 渲染echarts对象
      this.getproperties();
     this.impor()
      for (let x = 0; x < 2; x++) {
      setTimeout(() => {
        this.impor()
        this.setecharts();
      }, 700);
    }
    
  },
  methods: {
    // 获取服务器资源信息
    getproperties() {
      this.$axios
        .post("/safesys/api/server/search", { pageSize: 100 })
        .then((res) => {
          this.services = res.data.data.list;
          for (var index = 0; index < this.services.length; index++) {
            if (this.services[index].state == this.serviceitem[1].name) {
              this.serviceitem[1].value++;
            } else {
              this.serviceitem[0].value++;
            }
          }
          this.options[0].series[0].data = this.serviceitem;
        });

      this.$axios
        .post("/safesys/api/loophole/search", { pageSize: 100 })
        .then((res) => {
          this.loopholes = res.data.data.list;
          for (var index = 0; index < this.loopholes.length; index++) {
            if (this.loopholes[index].state == this.loopholeitem[0].name) {
              this.loopholeitem[0].value++;
            } else if (
              this.loopholes[index].state == this.loopholeitem[1].name
            ) {
              this.loopholeitem[1].value++;
            } else {
              this.loopholeitem[2].value++;
            }
          }
          this.options[1].series[0].data = this.loopholeitem;
        });
        this.impor()
    },

    impor() {
      this.$axios
        .post("/safesys/api/user/search", { pageSize: 100 })
        .then((res) => {
          this.users = res.data.data.list;
          var it = 0;
          var flag1 = 1;
          var flag2 = 1;
          var count1 = 0;
          var count2 = 0;
          this.useritem.usernamedata = [];
          for (var i = 0; i < this.users.length; i++) {
            var user = this.users[i];

            for (var j = 0; j < this.loopholes.length; j++) {
              var loophole = this.loopholes[j];

              if (user.id == loophole.userID) {
                if (flag1 == 1) {
                  this.useritem.usernamedata.push(user.userName);
                  flag1 = 0;
                }

                if (loophole.state == "已处理") {
                  count1++;
                  flag2 = 0;
                } else {
                  count2++;
                  flag2 = 0;
                }
              }
            }
            if (flag2 == 0) {
              if (count1 == 0 && count2 == 0) {
              } else {
                this.useritem.userhandleddata[it] = count1;
                this.useritem.userhandlingdata[it] = count2;
                count1 = 0;
                count2 = 0;
                it++;
                flag2 == 1;
              }
            }
            flag1 = 1;
          }
          this.options[2].yAxis.data = this.useritem.usernamedata;
          this.options[2].series[0].data = this.useritem.userhandlingdata;
          this.options[2].series[1].data = this.useritem.userhandleddata;
        });
    },
    // 渲染对象具体方法实现
    setecharts() {
      var charts = [];
      var myChart = echarts.init(document.getElementById("service"));
      this.options[0].series[0].data = this.serviceitem;
      myChart.setOption(this.options[0]);
      charts.push(myChart);

      myChart = echarts.init(document.getElementById("loophole"));
      this.options[1].series[0].data = this.loopholeitem;
      myChart.setOption(this.options[1]);
      charts.push(myChart);

      console.log(this.options[2])
      myChart = echarts.init(document.getElementById("user"));
      myChart.setOption(this.options[2]);
    },
  },
  watch: {
    // 监听数组变化
    useritem: {
      handler: function (o, n) { 
        this.setecharts();
      },
      immediate:true
    },
  },
};
</script>
<style scoped>
#loophole,
#service,
#user {
  width: 600px;
  height: 300px;
  display: inline-block;
}
</style>